<template>
    <div>
        <div class="example">
            {{ msg }}
            <img :src="url" width="250"/>
            <img src="@/assets/img/bg.png" alt="">
        </div>
        <div>
            <router-link to="/About">About</router-link>
            <router-link :to='/Detail/+id'>Detail</router-link>
        </div>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import getData from '@/assets/js/getData'
import img from '@/assets/img/bg.png'

export default {
    data() {
        return {
            msg: 'Hello Webpack',
            url: img,
            id: 123
        }
    },
    methods: {
        async fetchData() {
            const data = await getData();
            this.msg = data;
         }
    },
    created() {
        this.fetchData()
    }
}
</script>

<style lang="less" scoped>
@import url('@/assets/css/common.less');
.example {
  color: @red;
  .center();
  background: url(../src/assets/img/bg.png);
}
</style>